Udvikling af browserekstensioner: Navigering i Manifest V3 og JavaScript API'er

Browserekstensioner giver en effektiv måde at forbedre og tilpasse browseroplevelsen på. De giver udviklere mulighed for at tilføje funktionalitet til webbrowsere, interagere med websider og integrere med webtjenester. Denne guide giver et omfattende overblik over udvikling af browserekstensioner med fokus på Manifest V3 og de centrale JavaScript API'er, der driver disse extensioner.

Forståelse af browserekstensioner

En browserekstension er et lille softwareprogram, der udvider funktionaliteten af en webbrowser. Extensioner kan ændre websider, tilføje nye funktioner og integrere med eksterne tjenester. De er typisk skrevet i JavaScript, HTML og CSS og pakket som en ZIP-fil med en manifestfil, der beskriver extensionens metadata og tilladelser.

Populære anvendelsestilfælde for browserekstensioner inkluderer:

• Ad blockers: Fjerner reklamer fra websider.
• Password managers: Opbevarer og administrerer adgangskoder sikkert.
• Produktivitetsværktøjer: Forbedrer workflow med funktioner som opgavestyring og notetagning.
• Indholdstilpasning: Ændrer udseendet og funktionsmåden på websider.
• Tilgængelighedsværktøjer: Forbedrer webtilgængeligheden for brugere med handicap.

Manifest V3: Den nye standard

Manifest V3 er den seneste version af browser extension manifestfilen, en JSON-fil, der beskriver extensionens metadata, tilladelser og ressourcer. Den introducerer betydelige ændringer i extension udviklingsprocessen, primært med fokus på forbedret sikkerhed, privatliv og ydeevne. Vigtige ændringer i Manifest V3 inkluderer:

• Service Workers: Erstatter baggrundssider med service workers for forbedret ydeevne og reduceret hukommelsesforbrug. Service workers er hændelsesdrevne scripts, der kører i baggrunden og håndterer hændelser som netværksanmodninger og alarmer.
• Declarative Net Request API: Erstatter den blokerende webRequest API med Declarative Net Request API til filtrering af netværksanmodninger. Dette forbedrer privatlivets fred og sikkerhed ved at begrænse extensionens adgang til netværkstrafik.
• Content Security Policy (CSP): Håndhæver strengere CSP-politikker for at forhindre udførelse af vilkårlig kode og mindske sikkerhedsrisici.
• Manifest Version: Nøglen manifest_version i manifest.json-filen skal være sat til 3.

Migrering fra Manifest V2 til Manifest V3

Migrering fra Manifest V2 til Manifest V3 kræver omhyggelig planlægning og kodeændringer. Her er en trin-for-trin guide:

1. Opdater manifestfilen: Sæt manifest_version til 3 og opdater felterne permissions og background for at overholde Manifest V3 kravene.
2. Erstat baggrundssider med service workers: Omskriv baggrundsscripts som service workers, og håndter hændelser ved hjælp af chrome.scripting og chrome.alarms API'erne.
3. Migrer til Declarative Net Request API: Erstat blokerende webRequest API-kald med deklarative regler defineret i declarativeNetRequest API'en.
4. Opdater indholdssikkerhedspolitik: Juster feltet content_security_policy i manifestfilen for at overholde strengere CSP-krav.
5. Test grundigt: Test extensionen grundigt i forskellige browsere for at sikre kompatibilitet og korrekt funktionalitet.

Eksempel: Migrering af et baggrundsscript til en Service Worker

Manifest V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3):

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

Væsentlige JavaScript API'er til browserekstensioner

Browserekstensioner er afhængige af et sæt JavaScript API'er til at interagere med browseren og websider. Her er nogle af de vigtigste API'er:

1. chrome.runtime

chrome.runtime API'en giver adgang til extensionens runtime-miljø. Det giver extensioner mulighed for at kommunikere med baggrundsscriptet, få adgang til manifestfilen og administrere extensionens livscyklus.

Vigtige metoder:

• chrome.runtime.sendMessage(): Sender en besked til baggrundsscriptet eller andre extensioner.
• chrome.runtime.onMessage.addListener(): Lytter efter beskeder fra andre scripts.
• chrome.runtime.getManifest(): Returnerer extensionens manifestfil som et JavaScript-objekt.
• chrome.runtime.reload(): Genindlæser extensionen.

Eksempel: Afsendelse af en besked fra indholdsscript til baggrundsscript

Indholdsscript (content.js):

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

Baggrundsscript (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

chrome.storage API'en giver en mekanisme til at gemme og hente data i extensionen. Det tilbyder både lokale og synkroniserede lager muligheder.

Vigtige metoder:

• chrome.storage.local.set(): Gemmer data lokalt.
• chrome.storage.local.get(): Henter data fra lokal lager.
• chrome.storage.sync.set(): Gemmer data, der synkroniseres på tværs af brugerens enheder.
• chrome.storage.sync.get(): Henter data fra synkroniseret lager.

Eksempel: Lagring og hentning af data i lokal lager

            // Store data
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Retrieve data
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

chrome.tabs API'en giver extensioner mulighed for at interagere med browserfaner. Det giver metoder til at oprette, forespørge, ændre og lukke faner.

Vigtige metoder:

• chrome.tabs.create(): Opretter en ny fane.
• chrome.tabs.query(): Forespørger efter faner, der matcher specifikke kriterier.
• chrome.tabs.update(): Opdaterer egenskaberne for en fane.
• chrome.tabs.remove(): Lukker en fane.
• chrome.tabs.executeScript(): Udfører JavaScript-kode i en fane.

Eksempel: Oprettelse af en ny fane

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

chrome.alarms API'en giver extensioner mulighed for at planlægge opgaver, der skal udføres på et bestemt tidspunkt eller efter et bestemt interval. Dette er især vigtigt i Manifest V3, da det erstatter brugen af timere på baggrundssider, som ikke længere understøttes.

Vigtige metoder:

• chrome.alarms.create(): Opretter en ny alarm.
• chrome.alarms.get(): Henter en eksisterende alarm.
• chrome.alarms.clear(): Rydder en alarm.
• chrome.alarms.getAll(): Henter alle alarmer.
• chrome.alarms.onAlarm.addListener(): Lytter efter alarmhændelser.

Eksempel: Oprettelse af en alarm

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

chrome.scripting API'en giver extensioner mulighed for at injicere JavaScript og CSS i websider. Denne API er en nøglekomponent i Manifest V3 og bruges af service workers til at interagere med websider, efter at de er indlæst.

Vigtige metoder:

• chrome.scripting.executeScript(): Udfører JavaScript-kode i en fane eller ramme.
• chrome.scripting.insertCSS(): Indsætter CSS i en fane eller ramme.

Eksempel: Injicering af JavaScript i en fane

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

chrome.notifications API'en giver extensioner mulighed for at vise notifikationer til brugeren. Dette er nyttigt til at give opdateringer, alarmer og andre vigtige oplysninger.

Vigtige metoder:

• chrome.notifications.create(): Opretter en ny notifikation.
• chrome.notifications.update(): Opdaterer en eksisterende notifikation.
• chrome.notifications.clear(): Rydder en notifikation.
• chrome.notifications.getAll(): Henter alle notifikationer.

Eksempel: Oprettelse af en notifikation

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

chrome.contextMenus API'en giver extensioner mulighed for at tilføje elementer til browserens kontekstmenu (højreklikmenu). Dette giver brugerne en praktisk måde at få adgang til extension funktionalitet direkte fra websider.

Vigtige metoder:

• chrome.contextMenus.create(): Opretter et nyt kontekstmenuelement.
• chrome.contextMenus.update(): Opdaterer et eksisterende kontekstmenuelement.
• chrome.contextMenus.remove(): Fjerner et kontekstmenuelement.
• chrome.contextMenus.removeAll(): Fjerner alle kontekstmenuelementer, der er oprettet af extensionen.

Eksempel: Oprettelse af et kontekstmenuelement

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

chrome.i18n API'en bruges til at internationalisere din extension, hvilket gør den tilgængelig for brugere på forskellige sprog og regioner. Det giver dig mulighed for at levere lokaliserede versioner af din extensions UI og beskeder.

Vigtige metoder:

• chrome.i18n.getMessage(): Henter en lokaliseret streng fra extensionens _locales mappe.

Eksempel: Brug af chrome.i18n til lokalisering

Opret først en _locales mappe i din extensions rodmappe. Opret inde i sprogspecifikke mapper som en, es, fr osv.

Opret en messages.json fil i hver sprogmappe. For eksempel i _locales/en/messages.json:

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

Derefter i din JavaScript-kode:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Output: My Extension
console.log(greeting);      // Output: Hello, world!

            

              
                Copy
              
            
          

Cross-Browser kompatibilitet

Selvom Chrome er den mest populære browser til extension udvikling, er det vigtigt at overveje cross-browser kompatibilitet. Firefox, Safari og andre browsere understøtter også extensioner, men deres API'er og manifestformater kan variere lidt.

For at sikre cross-browser kompatibilitet:

• Brug WebExtensions API: WebExtensions API er en standardiseret API til browser extension udvikling, der understøttes af flere browsere.
• Test i forskellige browsere: Test din extension i forskellige browsere for at identificere og rette kompatibilitetsproblemer.
• Brug polyfills: Brug polyfills til at levere manglende API-funktionalitet i forskellige browsere.
• Betinget kode: Brug betinget kode til at tilpasse dig browserspecifikke forskelle. For eksempel: if (typeof browser === "undefined") { var browser = chrome; }

Bedste praksis for browserekstensionsudvikling

Her er nogle bedste fremgangsmåder, du skal følge, når du udvikler browserekstensioner:

• Minimer tilladelser: Anmod kun om de tilladelser, som din extension absolut har brug for. Dette forbedrer brugerens privatliv og sikkerhed.
• Brug sikker kodningspraksis: Følg sikker kodningspraksis for at forhindre sårbarheder som cross-site scripting (XSS) og kodeinjektion.
• Optimer ydeevnen: Optimer din extensions ydeevne for at minimere dens indvirkning på browserens ydeevne.
• Giv klar og præcis dokumentation: Giv klar og præcis dokumentation for at hjælpe brugerne med at forstå, hvordan de bruger din extension.
• Håndter fejl på en elegant måde: Implementer fejlhåndtering for at forhindre din extension i at gå ned eller forårsage uventet adfærd.
• Hold din extension opdateret: Opdater regelmæssigt din extension for at løse fejl, sikkerhedssårbarheder og kompatibilitetsproblemer.
• Overvej internationalisering (i18n): Design din extension til let at kunne lokaliseres til forskellige sprog. Brug chrome.i18n API'en.
• Respekter brugernes privatliv: Vær gennemsigtig om, hvordan din extension indsamler og bruger brugerdata, og indhent brugerens samtykke, når det er nødvendigt. Overhold relevante privatlivsbestemmelser som GDPR og CCPA.

Indsendelse af din extension til butikkerne

Når din extension er udviklet og testet, vil du gerne indsende den til browserekstensionsbutikkerne for at gøre den tilgængelig for brugerne. Hver browser har sin egen butik og indsendelsesproces:

• Chrome Web Store: Indsend din extension til Chrome Web Store til Chrome-brugere. Processen involverer oprettelse af en udviklerkonto, pakning af din extension og upload af den til butikken.
• Firefox Add-ons: Indsend din extension til Firefox Add-ons til Firefox-brugere. Processen svarer til Chrome Web Store og involverer oprettelse af en udviklerkonto og indsendelse af din extension til gennemgang.
• Safari Extensions Gallery: Indsend din extension til Safari Extensions Gallery til Safari-brugere. Processen involverer indhentning af et udviklercertifikat fra Apple og indsendelse af din extension til gennemgang.

Når du indsender din extension, skal du sørge for at give nøjagtige og fuldstændige oplysninger, herunder en beskrivende titel, en detaljeret beskrivelse, skærmbilleder og en politik om beskyttelse af personlige oplysninger. Extensionsbutikkerne gennemgår indsendelser for at sikre, at de overholder deres politikker og retningslinjer.

Konklusion

Browserekstensionsudvikling med Manifest V3 og JavaScript API'er giver en effektiv måde at tilpasse og forbedre browseroplevelsen på. Ved at forstå kernekoncepterne, følge bedste praksis og overveje cross-browser kompatibilitet kan udviklere skabe værdifulde og engagerende extensioner til brugere over hele verden. Efterhånden som nettet udvikler sig, vil browserekstensioner fortsætte med at spille en vigtig rolle i udformningen af internettets fremtid.

Husk altid at prioritere brugernes privatliv og sikkerhed, når du udvikler extensioner. Ved at bygge med disse principper i tankerne kan du skabe extensioner, der er både nyttige og troværdige.

Denne guide giver et solidt fundament for at komme i gang med browserekstensionsudvikling. Når du dykker dybere, kan du udforske de forskellige API'er og funktioner, der er tilgængelige, og eksperimentere med forskellige teknikker til at skabe innovative og virkningsfulde extensioner.